<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<title>首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div    id="content">
	<section class="content-header">
		<h1>
			<i class="fa fa-dashboard"></i>
			<strong>案件数据分析</strong>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
			<li>案件数据分析</li>
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">案件数据分析</h4>
					</div>
					<div class="modal-body">
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-1 control-label">时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<select class="form-control" id="cyc" style="width: 100%;">
											<option value="week">当周</option>
											<option value="month">当月</option>
											<option value="year">当年</option>
											<option value="custom">自定义周期</option>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group" id="cycDate" style="display: none;">
								<label class="col-sm-1 control-label">开始时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<input type="date" class="form-control" id="beginDate" style="width: 100%;"/>
									</div>
								</div>
								<label class="col-sm-1 control-label">结束时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<input type="date" class="form-control" id="endDate" style="width: 100%;"/>
									</div>
								</div>
								<div class="col-md-1">
									<button type="button" class="btn btn-primary cycBtn" >确定</button>
								</div>
							</div>
						</div>
					</div>
					<div class="box-body">
						<table  id="dataTable" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="5%" >序号</th>
								<th width="8%" >案件时间</th>
								<th width="20%" >发生地点</th>
								<th width="8%" >案件类型</th>
								<th width="8%" >处理状态</th>
								<th width="8%" >所属网格</th>
								<th width="8%" >处置人员</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">数据展示</h4>
					</div>
					<div class="box-body">
						<div id="axis1" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">数据展示</h4>
					</div>
					<div class="box-body">
						<div id="pie1" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">数据展示</h4>
					</div>
					<div class="box-body">
						<div id="axis2" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">数据展示</h4>
					</div>
					<div class="box-body">
						<div id="pie2" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<script th:src="@{/analysis/eventanalysisindex.js}"></script>
</div>

</body>
</html>